<template>
	<view class="appoint" ref="container">
		<form class="appoint" @submit="formSubmit">
			<view class="app_index">
				<view class="item">
					<view class="label">用户ID<text style="color: red;">*</text></view>
					<view class="value">
						<input type="number" :value="customerInfo.uid.id" name="uid" maxlength="10" placeholder="请输入用户ID" style="margin-top: 24rpx;"></input>
					</view>
				</view>
				<view class="item">
					<view class="label">客服昵称<text style="color: red;">*</text></view>
					<view class="value">
						<input :value="customerInfo.nickname" name="nickname" maxlength="5" placeholder="请输入客服昵称" style="margin-top: 24rpx;"></input>
					</view>
				</view>
				<view class="item">
					<view class="label">客服状态</view>
					<view class="value">
						<switch :checked="customerInfo.status" color="#e93323" @change="statusChange" style="transform: scale(0.7);"/>
					</view>
				</view>
				<view class="item">
					<view class="label">订单通知</view>
					<view class="value">
						<switch :checked="customerInfo.notify" color="#e93323" @change="notifyChange" style="transform: scale(0.7);"/>
					</view>
				</view>
				<view class="item" v-if="customerInfo.notify">
					<view class="label">通知电话</view>
					<view class="value">
						<input :value="customerInfo.phone" name="phone" maxlength="15" placeholder="请输入通知电话" style="margin-top: 24rpx;"></input>
					</view>
				</view>
				<view class="item">
					<view class="label">订单管理</view>
					<view class="value">
						<switch :checked="customerInfo.customer" color="#e93323" @change="customerChange" style="transform: scale(0.7);"/>
					</view>
				</view>
				<view class="item">
					<view class="label">订单核销</view>
					<view class="value">
						<switch :checked="customerInfo.is_verify" color="#e93323" @change="verifyChange" style="transform: scale(0.7);"/>
					</view>
				</view>
				<view class="item">
					<view class="label">分类管理</view>
					<view class="value">
						<switch :checked="customerInfo.category" color="#e93323" @change="categoryChange" style="transform: scale(0.7);"/>
					</view>
				</view>
				<view class="item">
					<view class="label">商品管理</view>
					<view class="value">
						<switch :checked="customerInfo.goods" color="#e93323" @change="goodsChange" style="transform: scale(0.7);"/>
					</view>
				</view>
				<view class="item">
					<view class="label">客服管理</view>
					<view class="value">
						<switch :checked="customerInfo.clerk" color="#e93323" @change="clerkChange" style="transform: scale(0.7);"/>
					</view>
				</view>
			</view>
			<view class="app_index">
				<view class="item" style="height: 160rpx;line-height: 160rpx;">
					<view class="label">客服头像</view>
					<view class="value">
						<view v-if="customerInfo.avatar" @click='uploadimg' style="width: 156rpx;height: 156rpx;border: 1px solid #e0e0e0;position: relative;display: inline-block;margin-right: 10rpx;">
							<image :src="customerInfo.avatar" mode="aspectFill" style="max-width: 100%;max-height: 100%;"></image>
						</view>
						<view v-if="!customerInfo.avatar" @click='uploadimg' style="width: 156rpx;height: 156rpx;border: 1px solid #e0e0e0;position: relative;display: inline-block;">
							<text class='iconfont icon-icon25201' style="position: absolute;top: -10rpx;right: 46rpx;font-size: 60rpx;padding: 8rpx;"></text>
						</view>
					</view>
				</view>
			</view>
			<view style="position: fixed;left: 0;bottom: 20rpx;width: 100%;height: 80rpx;line-height: 80rpx;color: #fff;text-align: center;z-index: 9;">
				<button form-type="submit" style="width: 660rpx;margin: 0 auto;border-radius: 60rpx;color: #fff;line-height: 40px;font-size: 14px;" class="bg-color">
					提交保存
				</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getCustomerDetail,
		customerEdit
	} from "@/api/admin";
	export default {
		name: "AdminCustomerEdit",
		components:{
		},
		data() {
			return {
				customerId: 0,
				customerInfo: {
					uid: {
						id: '',
						src: '1'
					},
					nickname: '',
					status: 0,
					notify: 0,
					phone: '',
					customer: 0,
					is_verify: 0,
					category: 0,
					goods: 0,
					clerk: 0,
					avatar: '',
				},
			};
		},
		onLoad(option) {
			if (option.id) {
				this.customerId = option.id;
				this.getCustomerDetail();
			}
		},
		methods: {
			// 获取数据
			getCustomerDetail: function() {
				let that = this;
				getCustomerDetail(this.customerId).then(
					res => {
						that.customerInfo = res.data;
					},
					err => {
						that.$util.Tips({ title: err });
					}
				)
			},
			statusChange(e) {
				this.customerInfo.status = e.target.value ? 1 : 0;
			},
			notifyChange(e) {
				this.customerInfo.notify = e.target.value ? 1 : 0;
			},
			customerChange(e) {
				this.customerInfo.customer = e.target.value ? 1 : 0;
			},
			verifyChange(e) {
				this.customerInfo.is_verify = e.target.value ? 1 : 0;
			},
			categoryChange(e) {
				this.customerInfo.category = e.target.value ? 1 : 0;
			},
			goodsChange(e) {
				this.customerInfo.goods = e.target.value ? 1 : 0;
			},
			clerkChange(e) {
				this.customerInfo.clerk = e.target.value ? 1 : 0;
			},
			formSubmit(e){
				let that = this;
				let formData = e.detail.value;
				let customerInfo = that.customerInfo;
				customerInfo.nickname = formData.nickname;
				customerInfo.phone = formData.phone;
				customerInfo.uid.id = parseInt(formData.uid);
				// 必填项
				if (!customerInfo.nickname) return that.$util.Tips({ title: '请填写客服昵称' });
				if (!customerInfo.uid.id) return that.$util.Tips({ title: '请填写用户ID' });
				customerEdit(that.customerId, customerInfo).then(
					res => {
						let pages = getCurrentPages();//当前页
						let beforePage = pages[pages.length - 2];//上个页面
						// #ifdef H5
						beforePage.init()
						// #endif
						// #ifndef H5
						beforePage.$vm.init()
						// #endif
						that.$util.Tips({
							title:res.message,
							icon:'success'
						}, {tab: 3})
					},
					err => {
						that.$util.Tips({title: err});
					}
				);
			},
			uploadimg() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.customerInfo.avatar = res.data.path;
					that.$set(that, 'customerInfo', that.customerInfo);
				});
			}
		}
	}
</script>

<style>
	.appoint {
		padding-bottom: 130rpx;
	}

	.appoint .app_index {
		width: 710rpx;
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 10rpx 0;
	}

	.appoint .app_index .item {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 20rpx;
	}

	.appoint .app_index .item .but {
		width: 655rpx;
		height: 90rpx;
		background: #ffdd00;
		text-align: center;
		border-radius: 80rpx;
		margin-top: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.appoint .app_index .item .label {
		width: 190rpx;
		float: left;
	}

	.appoint .app_index .item .value {
		width: 480rpx;
		float: right;
		position: relative;
		text-align: right;
	}

	.appoint .app_index .item .type {
		width: 500rpx;
		text-align: center;
		float: left;
		height: 65rpx;
	}

	.appoint .app_index .item .type .select {
		width: 155rpx;
		height: 65rpx;
		line-height: 65rpx;
		margin-top: 20rpx;
		border: 1px solid #999ea4;
		border-radius: 40rpx;
		float: left;
	}

	.appoint .app_index .item .type .on {
		color: #ffaa19;
		border: 1px solid #ffaa19;
	}
</style>
